<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="button" value="get请求" id="btn1">
    <input type="button" value="post请求" id="btn2">
    <input type="button" value="html请求" id="btn3">
    <input type="button" value="带loading的请求" id="btn4">
    <input type="button" value="超时的请求" id="btn5">
    <input type="button" value="jsonp请求" id="btn6">
    <input type="button" value="不触发生命周期的请求" id="btn7">
    <div class="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
    // $.ajax(参数1, 参数2)
    // 参数1：url
    // 参数2：配置对象

    // $.ajax(参数1)
    // 参数1：配置对象

    // 配置对象内的属性
    // $.ajax({
    //     url:"",
    //     type:"",
    //     data:{},
    //     success:()=>{},
    //     error:()=>{},
    //     timeout:1000,
    //     beforeSend:()=>{},
    //     dataType:"",
    //     global:true,
    //     jsonp:""
    // })


    // 发起get请求
    $("#btn1").click(function(){
        $.ajax({
            url:"http://icodeilife.club:3000/api/pro/search",
            data:{
                sKey:"零食"
            },
            success:(res, state, xhr)=>{
                console.log(res);
            }
        })
    })

    // 发起post请求
    $("#btn2").click(function(){
        $.ajax({
            url:"http://icodeilife.club:3000/api/pro/search",
            type:"post",
            data:{
                sKey:"零食"
            },
            success:(res, state, xhr)=>{
                console.log(res);
            }
        })
    })

    // 发起html文件请求
    $("#btn3").click(function(){
        $.ajax({
            url:"./public/header.html",
            success:(res, state, xhr)=>{
                // 经过复杂的数据处理，可以拿到指定结构
                $(".box").html(res);
            }
        })
    })
    
    // 带loading的请求(实际使用时，一定要单例模式)
    $("#btn4").click(function(){
        $.ajax({
            url:"http://icodeilife.club:3000/api/pro/search",
            beforeSend:()=>{
                $("<img class='loading' src='./loading.jpg' />").appendTo($("body"));
            },
            success:(res, state, xhr)=>{
                $(".loading").remove();
            }
        })
    })

    // 会超时的请求：一定要添加错误处理
    $("#btn5").click(function(){
        $.ajax({
            url:"http://icodeilife.club:3000/api/pro/search",
            success:(res, state, xhr)=>{
                console.log(res)
            },
            error:(xhr, state, res)=>{
                console.log(state, res)
            },
            timeout: 150
        })
    })

    // jsonp跨域的请求
    $("#btn6").click(function(){
        $.ajax({
            url:"https://suggest.taobao.com/sug",
            data:{
                k:1,
                area:"c2c",
                q:"手机",
                code:"utf-8",
                ts:1659324763960
            },
            success:(res, state, xhr)=>{
                console.log(res)
            },
            error:(xhr, state, res)=>{
                console.log(state, res)
            },
            dataType:"jsonp",
            jsonp:"callback"
        })
    })

    // 不触发生命周期的请求
    $("#btn7").click(function(){
        $.ajax({
            url:"http://icodeilife.club:3000/api/pro/search",
            success:(res, state, xhr)=>{
                console.log(res)
            },
            global:false
        })
    })


    // 什么是生命周期的钩子函数：hook

    // 启动状态
    // 发送状态
    // 成功状态
    // 结束状态

    $(document).ajaxStop(()=>{
        console.log("stop")
    })
    $(document).ajaxSend(()=>{
        console.log("send")
    })
    $(document).ajaxError(()=>{
        console.log("error")
    })
    $(document).ajaxStart(()=>{
        console.log("start")
    })
    $(document).ajaxSuccess(()=>{
        console.log("success")
    })
    $(document).ajaxComplete(()=>{
        console.log("Complete")
    })



</script>
</html>